<template>
  <div class="refunds-container">
    <div class="refunds-header">
      <h2 class="page-title">退货退款管理</h2>
    </div>
    
    <!-- 退款状态筛选 -->
    <div class="filter-section">
      <el-radio-group v-model="statusFilter" class="status-filter">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="pending">待审核</el-radio-button>
        <el-radio-button label="approved">审核通过</el-radio-button>
        <el-radio-button label="rejected">审核拒绝</el-radio-button>
        <el-radio-button label="processing">退款处理中</el-radio-button>
        <el-radio-button label="completed">退款成功</el-radio-button>
        <el-radio-button label="failed">退款失败</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 退款列表 -->
    <div class="refunds-list">
      <div 
        v-for="refund in filteredRefunds" 
        :key="refund.id"
        class="refund-item"
      >
        <!-- 退款基本信息 -->
        <div class="refund-header">
          <div class="refund-info">
            <span class="refund-id">退款单号：{{ refund.id }}</span>
            <span class="refund-time">申请时间：{{ formatDate(refund.applyTime) }}</span>
          </div>
          <el-tag 
            :type="getStatusTagType(refund.status)"
            :class="getStatusTagClass(refund.status)"
          >
            {{ getStatusText(refund.status) }}
          </el-tag>
        </div>
        
        <!-- 订单信息 -->
        <div class="order-info">
          <span class="order-id">订单号：{{ refund.orderId }}</span>
          <span class="order-time">下单时间：{{ formatDate(refund.orderTime) }}</span>
        </div>
        
        <!-- 退款商品信息 -->
        <div class="refund-products">
          <div 
            v-for="product in refund.products" 
            :key="product.id"
            class="product-item"
          >
            <div class="product-image">
              <img :src="product.image" :alt="product.name" class="image">
            </div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-spec" v-if="product.spec">
                {{ product.spec }}
              </div>
              <div class="product-price">
                ¥{{ formatPrice(product.price) }} x {{ product.quantity }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 退款信息 -->
        <div class="refund-details">
          <div class="refund-amount">
            退款金额：<span class="amount">¥{{ formatPrice(refund.amount) }}</span>
          </div>
          <div class="refund-reason">
            退款原因：<span>{{ refund.reason }}</span>
          </div>
          <div class="refund-description" v-if="refund.description">
            退款说明：<span>{{ refund.description }}</span>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="refund-actions">
          <el-button 
            v-if="refund.status === 'pending'"
            type="text" 
            @click="cancelRefund(refund.id)"
            class="action-btn"
          >
            取消申请
          </el-button>
          <el-button 
            v-if="refund.status === 'approved'"
            type="primary" 
            @click="uploadProof(refund.id)"
            class="action-btn primary"
          >
            上传凭证
          </el-button>
          <el-button 
            type="text" 
            @click="viewDetails(refund.id)"
            class="action-btn"
          >
            查看详情
          </el-button>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredRefunds.length === 0" class="empty-state">
        <el-empty 
          description="暂无退款记录"
          image="/assets/empty-refund.png"
        >
          <template #image>
            <div class="empty-image">
              <el-icon><RefreshLeft /></el-icon>
            </div>
          </template>
        </el-empty>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredRefunds.length > 0" class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredRefunds.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { RefreshLeft } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate, formatPrice } from '../../utils/helper'

const router = useRouter()
const statusFilter = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)

// 退款列表数据（模拟数据）
const refunds = ref([
  {
    id: 'RF202401010001',
    orderId: 'OD202401010001',
    status: 'pending',
    amount: 299.00,
    reason: '商品描述不符',
    description: '收到的商品与页面描述有差异',
    applyTime: '2024-01-01T10:30:00',
    orderTime: '2023-12-31T15:45:00',
    products: [
      {
        id: 'P001',
        name: '智能手环 Pro',
        image: '/assets/product1.jpg',
        spec: '黑色 / 标准版',
        price: 299.00,
        quantity: 1
      }
    ]
  },
  {
    id: 'RF202401020001',
    orderId: 'OD202401020001',
    status: 'approved',
    amount: 1599.00,
    reason: '商品质量问题',
    description: '手机屏幕有划痕',
    applyTime: '2024-01-02T14:20:00',
    orderTime: '2024-01-01T09:15:00',
    products: [
      {
        id: 'P002',
        name: '智能手机 X5',
        image: '/assets/product2.jpg',
        spec: '黑色 / 256GB',
        price: 1599.00,
        quantity: 1
      }
    ]
  },
  {
    id: 'RF202401030001',
    orderId: 'OD202401030001',
    status: 'completed',
    amount: 89.50,
    reason: '不想要了',
    description: '冲动购买，不想要了',
    applyTime: '2024-01-03T09:10:00',
    orderTime: '2024-01-02T20:30:00',
    products: [
      {
        id: 'P003',
        name: '蓝牙音箱 Mini',
        image: '/assets/product3.jpg',
        spec: '红色',
        price: 89.50,
        quantity: 1
      }
    ]
  },
  {
    id: 'RF202401040001',
    orderId: 'OD202401040001',
    status: 'rejected',
    amount: 199.00,
    reason: '商品损坏',
    description: '收到的商品有损坏',
    applyTime: '2024-01-04T16:45:00',
    orderTime: '2024-01-03T11:20:00',
    products: [
      {
        id: 'P004',
        name: '便携充电宝',
        image: '/assets/product4.jpg',
        spec: '10000mAh / 白色',
        price: 199.00,
        quantity: 1
      }
    ]
  }
])

// 根据筛选条件过滤退款记录
const filteredRefunds = computed(() => {
  if (statusFilter.value === 'all') {
    return refunds.value
  }
  return refunds.value.filter(refund => refund.status === statusFilter.value)
})

// 获取状态对应的文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    approved: '审核通过',
    rejected: '审核拒绝',
    processing: '退款处理中',
    completed: '退款成功',
    failed: '退款失败'
  }
  return statusMap[status] || status
}

// 获取状态对应的标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'primary',
    rejected: 'danger',
    processing: 'info',
    completed: 'success',
    failed: 'danger'
  }
  return typeMap[status] || 'default'
}

// 获取状态对应的标签样式
const getStatusTagClass = (status) => {
  return `status-${status}`
}

// 取消退款申请
const cancelRefund = (refundId) => {
  ElMessageBox.confirm(
    '确定要取消该退款申请吗？',
    '取消确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      // 模拟取消退款申请
      // 实际项目中应调用 orderAPI.cancelRefund(refundId)
      
      const refund = refunds.value.find(r => r.id === refundId)
      if (refund) {
        refund.status = 'cancelled'
      }
      
      ElMessage.success('退款申请已取消')
    } catch (error) {
      ElMessage.error('取消退款申请失败')
      console.error('取消退款申请失败:', error)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 上传凭证
const uploadProof = (refundId) => {
  ElMessage.info('即将打开上传凭证界面')
  // 实际项目中应打开上传凭证弹窗或跳转到上传页面
}

// 查看详情
const viewDetails = (refundId) => {
  // 跳转到退款详情页面
  ElMessage.info('即将跳转到退款详情页面')
  // router.push(`/user/refund/detail/${refundId}`)
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

// 处理当前页变化
const handleCurrentChange = (current) => {
  currentPage.value = current
}
</script>

<style scoped>
.refunds-container {
  background-color: #fff;
}

.refunds-header {
  padding: 20px 0;
  border-bottom: 1px solid $border-color;
  margin-bottom: 20px;
}

.page-title {
  font-size: $font-size-lg;
  font-weight: 500;
  color: $text-color;
  margin: 0;
}

/* 筛选条件 */
.filter-section {
  margin-bottom: 20px;
  padding: 0 20px;
}

.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 退款列表 */
.refunds-list {
  padding: 0 20px 20px;
}

.refund-item {
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.refund-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 退款头部 */
.refund-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.refund-info {
  display: flex;
  gap: 20px;
  color: $text-color-secondary;
}

.refund-id,
.refund-time {
  font-size: $font-size-sm;
}

/* 订单信息 */
.order-info {
  display: flex;
  gap: 20px;
  color: $text-color-secondary;
  margin-bottom: 15px;
  font-size: $font-size-sm;
}

/* 退款商品 */
.refund-products {
  margin-bottom: 15px;
}

.product-item {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: $border-radius-base;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: $font-size-base;
  color: $text-color;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-spec {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  margin-bottom: 5px;
}

.product-price {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
}

/* 退款详情 */
.refund-details {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fafafa;
  border-radius: $border-radius-base;
}

.refund-amount {
  margin-bottom: 10px;
  font-size: $font-size-base;
  color: $text-color;
}

.amount {
  font-size: $font-size-lg;
  font-weight: 500;
  color: $danger-color;
}

.refund-reason {
  margin-bottom: 10px;
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.refund-description {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

/* 操作按钮 */
.refund-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  font-size: $font-size-sm;
}

.action-btn.primary {
  font-size: $font-size-sm;
  padding: 5px 15px;
}

/* 状态标签样式 */
:deep(.status-pending) {
  background-color: #fdf6ec;
  border-color: #faad14;
  color: #faad14;
}

:deep(.status-approved) {
  background-color: #e6f7ff;
  border-color: #1890ff;
  color: #1890ff;
}

:deep(.status-rejected) {
  background-color: #fff1f0;
  border-color: #ff4d4f;
  color: #ff4d4f;
}

:deep(.status-processing) {
  background-color: #e6f7ff;
  border-color: #1890ff;
  color: #1890ff;
}

:deep(.status-completed) {
  background-color: #f6ffed;
  border-color: #52c41a;
  color: #52c41a;
}

:deep(.status-failed) {
  background-color: #fff1f0;
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 空状态 */
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-image {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  background-color: #f5f7fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-image .el-icon {
  font-size: 60px;
  color: #c0c4cc;
}

/* 分页 */
.pagination {
  padding: 20px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-section {
    padding: 0 10px;
  }
  
  .status-filter {
    flex-direction: column;
  }
  
  .refunds-list {
    padding: 0 10px 10px;
  }
  
  .refund-item {
    padding: 15px;
  }
  
  .refund-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .refund-info {
    flex-direction: column;
    gap: 5px;
  }
  
  .order-info {
    flex-direction: column;
    gap: 5px;
  }
  
  .product-image {
    width: 60px;
    height: 60px;
  }
  
  .refund-actions {
    flex-direction: column;
    align-items: flex-end;
  }
  
  .pagination {
    padding: 10px;
  }
}
</style>